<template>
	<view class="navbar">
		<view :class="{btn:true, 'btn-back':true}" hover-class="hover" @click="clickLeft">
			<view class="btn-icon" ></view>
		</view>
		<view class="title">{{title}}</view>
		<view class="btn right-btn">
			
		</view>
	</view>
</template>

<script>
export default{
	name:'bro-navbar',
	props:{
		title:{type:String},
		color:{type:String,default:'#3f3f3f'},
		bgcolor:{type:String,default:'#fff'},
	},
	methods:{
		clickTabbar(item){
			this.$emit('click-tabbar',item)
		},
		clickLeft() {
			uni.navigateBack({});
		},
	}
}
</script>

<style lang="scss" scoped>
	.navbar{
		direction: ltr;
		height: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: var(--app-navbar-bg-color);
		color: var(--app-navbar-text-color);
		.title{
			white-space: nowrap;
			text-align: center;
			overflow: hidden;
			text-overflow: ellipsis;
			font-size: 12px;
			width: calc(100vw - 150px);
		}
		.btn{
			width: 50px;
			height: 100%;
		}
		.right-btn{
			/* #ifdef MP */
			padding-right: 50px;
			/* #endif */
		}
		.btn-back{
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			
		}
		.btn-icon{
			width: 10px;
			height: 10px;
			border-top: solid 2px;
			border-left: solid 2px;
			border-color: var(--app-navbar-text-color);
			transform: rotate(-45deg);
		}
	}
</style>
